'use client';

import { signIn, signOut, useSession } from 'next-auth/react';
import Image from 'next/image';

export function UserButton() {
  const { data: session, status } = useSession();

  if (status === 'loading') {
    return <div className="h-8 w-8 rounded-full bg-gray-200 animate-pulse" />;
  }

  if (!session) {
    return (
      <button
        onClick={() => signIn()}
        className="text-sm font-medium text-gray-700 hover:text-gray-900"
      >
        登录
      </button>
    );
  }

  return (
    <div className="relative group">
      <button className="flex items-center space-x-1">
        {session.user?.image ? (
          <Image
            src={session.user.image}
            alt={session.user.name || ''}
            width={32}
            height={32}
            className="rounded-full"
          />
        ) : (
          <div className="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
            {session.user?.name?.[0] || '?'}
          </div>
        )}
      </button>
      <div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 hidden group-hover:block">
        <button
          onClick={() => signOut()}
          className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
        >
          退出登录
        </button>
      </div>
    </div>
  );
} 